class Util {
  //每个块的宽度
  blockWidth() {
    return this.config.width / this.config.limit
  }
  //设置元素宽度样式
  width(el, n) {
    n = n || this.blockWidth()
    el.style.width = n + 'px'
  }
  // 设置元素高度样式
  height(el, n) {
    n = n || this.config.height
    el.style.height = n + 'px'
  }
  /**
   * 设置元素样式
   * @param  el 标签元素对象
   * @param  styles 样式表对象
   */
  styles(el, styles) {
    for (const rule in styles) {
      if (styles.hasOwnProperty(rule)) {
        el.style[rule] = styles[rule]
      }
    }
  }
}

class Slide extends Util {
  sections = []
  btns = []
  //当前旋转的索引，共四个
  index = 0
  //配置
  constructor(config) {
    super()
    this.config = config
  }
  //基本工作
  run() {
    this.createContainer()
    this.createSection()
    this.createSectionDiv()
    this.createImages()
    this.createTextBtns()
    this.createBtnsEvent()

    setInterval(() => {
      ++this.index
      if (this.index == 4) this.index = 0
      this.btnEvent(this.index)
    }, this.config.timeout * 1000 + 6000)
  }

  //创建顶级容器
  createContainer() {
    let el = document.querySelector(config.el)
    this.styles(el, { width: this.width(el, this.config.width), height: this.height(el) })
    this.el = el
  }

  //创建块
  createSection() {
    for (let index = 0; index < this.config.limit; index++) {
      let section = document.createElement('section')
      this.styles(section, {
        width: this.width(section),
        height: this.height(section),
        transformOrigin: `center center -${this.config.height / 2}px`,
        transition: `${this.config.transition}s`,
      })

      this.sections.push({ index, item: section, divs: [] })
      this.el.insertAdjacentElement('beforeEnd', section)
    }
  }

  //创建DIV
  createSectionDiv() {
    this.sections.map((section) => {
      for (let i = 0; i < 4; i++) {
        let div = document.createElement('div')
        this.styles(div, {
          height: this.height(div),
          width: this.width(div),
          transformOrigin: `center center -${this.config.height / 2}px`,
        })

        section.item.insertAdjacentElement('beforeEnd', div)
        section.divs.push(div)
      }
    })
  }

  //创建图片
  createImages() {
    this.sections.map((obj) => {
      obj.divs.map((div, i) => {
        let img = document.createElement('img')
        img.src = this.config.images[i]
        this.styles(img, { transform: `translateX(-${this.blockWidth() * obj.index}px)` })
        div.insertAdjacentElement('beforeEnd', img)
      })
    })
  }

  //创建文本按钮
  createTextBtns() {
    let div = document.createElement('div')
    div.classList.add('btns')
    for (let i = 0; i < 4; i++) {
      const span = document.createElement('span')
      span.innerText = i + 1
      div.insertAdjacentElement('beforeEnd', span)
      this.btns.push(span)

      if (this.index == i) {
        span.classList.add('active')
      }
    }
    this.el.insertAdjacentElement('beforeEnd', div)
  }

  //添加按钮事件
  createBtnsEvent() {
    for (const btn of this.btns) {
      btn.addEventListener('click', this.btnEvent.bind(this, this.btns.indexOf(btn)))
    }
  }
  //按钮点击事件
  btnEvent(index) {
    this.index = index
    this.toggleBtnActive()
    this.sections.map((obj, i) => {
      setTimeout(() => {
        this.styles(obj.item, {
          transform: `rotateX(${index * 90}deg)`,
        })
      }, ((this.config.timeout * 1000) / this.config.limit) * i)
    })
  }

  //切换按钮样式
  toggleBtnActive() {
    this.btns.map((btn, i) => {
      btn.classList.remove('active')
      if (i == this.index) {
        btn.classList.add('active')
      }
    })
  }
}
